<template>
  <view class="page-compute">
    <view class="top">
      <view class="search-input">
        <uni-search-bar
          @confirm="search"
          :focus="true"
          placeholder="请输入车型"
          v-model="searchValue"
          bgColor="#EEEEEE"
          @blur="blur"
          @input="input"
          @clear="clear"
        >
        </uni-search-bar>
      </view>
      <view v-if="results && results.length > 0" class="suggest-box">
        <CarSuggestList :list="results" @clickItem="onClickItem" />
      </view>

    </view>

    <view class="result">
      <uni-title type="h2" title="基础信息">
      </uni-title>
      <view class="section">
        <view class="second-title">
          车款
        </view>
        <view class="second-value">
          {{ current.originText || '' }}
        </view>
      </view>
      <uni-title type="h2" title="补贴政策"></uni-title>
      <uni-title type="h2" title="必要支出"></uni-title>
      <uni-title type="h2" title="购车方案"></uni-title>
      <uni-title type="h2" title="金融返利"></uni-title>
    </view>
  </view>
</template>
<script>
  import api from '@/api';
  import CarSuggestList from '../../components/CarSuggestList.vue';
  import { debounce } from '@/utils';
  export default {
    components: {
      CarSuggestList
    },
    data() {
      return {
        searchValue: '',
        current: {},
        form: {
          price: '', // 车价指导价
          price_change: '', // 车价变动
          id_card_spend: '', // 上牌费
          handling_charge: '', // 手续费
          insurance_spend: '', // 保险
          tax: '', // 税
        },
        results: []
      };
    },
    methods: {
      search(res) {
        uni.showToast({
          title: '搜索：' + res.value,
          icon: 'none',
        });
      },
      input: debounce(async function (inputVal) {
        if (!inputVal.trim()) return;
        const { code, data } = await api.searchCar({ keyword: inputVal })
        if (code === 200) {
          this.results = data?.list || [];
        }
      }, 300),
      clear(res) {
        uni.showToast({
          title: 'clear事件，清除值为：' + res.value,
          icon: 'none',
        });
      },
      onClickItem (item) {
        this.current = item;
        this.results = [];
        // this.searchValue = item.originText;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .top {
    position: sticky;
    top: 0;
    z-index: 20;
    .suggest-box {
      position: absolute;
      top: 112rpx;
      left: 0;
      width: 100%;
      height: calc(100vh - 112rpx);
      background: #fff;
    }
  }
  .result {
    padding: 10px;
  }
  .search-result {
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
  }

  .search-result-text {
    text-align: center;
    font-size: 14px;
    color: #666;
  }

  .example-body {
    padding: 0px;
  }

  .uni-mt-10 {
    margin-top: 10px;
  }
</style>
